<template>
  <div class="asset-operation-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>资产操作中心</h1>
      <p>请管理资产领用、归还、维修及报废流程</p>
    </div>

    <!-- 功能按钮区域 -->
    <div class="operation-cards">
      <!-- 申请领用（跳转页面） -->
      <el-card 
        class="operation-card" 
        hoverable
        @click="handleGoToApply"
      >
        <div class="card-icon领用">
          <el-icon><TakeawayBox /></el-icon>
        </div>
        <div class="card-content">
          <h3>申请领用</h3>
          <p>申请领用公司资产，填写领用信息及用途</p>
        </div>
        <div class="card-footer">
          <span>点击进入</span>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </el-card>

      <!-- 归还资产（弹窗） -->
      <el-card 
        class="operation-card" 
        hoverable
        @click="openDialog('return')"
      >
        <div class="card-icon归还">
          <el-icon><RefreshLeft /></el-icon>
        </div>
        <div class="card-content">
          <h3>归还资产</h3>
          <p>归还已领用的资产，登记归还状态及备注</p>
        </div>
        <div class="card-footer">
          <span>点击登记</span>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </el-card>

      <!-- 报废申请（弹窗） -->
      <el-card 
        class="operation-card" 
        hoverable
        @click="openDialog('scrap')"
      >
        <div class="card-icon报废">
          <el-icon><Delete /></el-icon>
        </div>
        <div class="card-content">
          <h3>报废申请</h3>
          <p>申请报废无法使用的资产，说明报废原因</p>
        </div>
        <div class="card-footer">
          <span>点击申请</span>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </el-card>

      <!-- 申请维修（弹窗） -->
      <el-card 
        class="operation-card" 
        hoverable
        @click="openDialog('repair')"
      >
        <div class="card-icon维修">
          <el-icon><Wrench /></el-icon>
        </div>
        <div class="card-content">
          <h3>申请维修</h3>
          <p>申请维修故障资产，描述故障情况及需求</p>
        </div>
        <div class="card-footer">
          <span>点击报修</span>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </el-card>
    </div>

    <!-- 归还资产弹窗 -->
    <el-dialog 
      title="归还资产登记" 
      v-model="dialogVisible.return" 
      width="600px"
    >
      <el-form 
        ref="returnFormRef" 
        :model="returnForm" 
        :rules="returnRules" 
        label-width="120px"
      >
        <el-form-item label="资产编号" prop="assetCode">
          <el-input v-model="returnForm.assetCode" placeholder="请输入资产编号"></el-input>
        </el-form-item>
        <el-form-item label="资产名称" prop="assetName">
          <el-input v-model="returnForm.assetName" placeholder="请输入资产名称"></el-input>
        </el-form-item>
        <el-form-item label="领用单号" prop="receiveNo">
          <el-input v-model="returnForm.receiveNo" placeholder="请输入原领用单号"></el-input>
        </el-form-item>
        <el-form-item label="归还日期" prop="returnDate">
          <el-date-picker v-model="returnForm.returnDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="资产状态" prop="status">
          <el-select v-model="returnForm.status" placeholder="请选择资产状态">
            <el-option label="完好" value="INTACT"></el-option>
            <el-option label="有损耗" value="DAMAGED"></el-option>
            <el-option label="故障" value="FAULTY"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归还备注" prop="remark">
          <el-input type="textarea" v-model="returnForm.remark" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible.return = false">取消</el-button>
        <el-button type="primary" @click="submitForm('return')">提交归还</el-button>
      </template>
    </el-dialog>

    <!-- 报废申请弹窗 -->
    <el-dialog 
      title="资产报废申请" 
      v-model="dialogVisible.scrap" 
      width="600px"
    >
      <el-form 
        ref="scrapFormRef" 
        :model="scrapForm" 
        :rules="scrapRules" 
        label-width="120px"
      >
        <el-form-item label="资产编号" prop="assetCode">
          <el-input v-model="scrapForm.assetCode" placeholder="请输入资产编号"></el-input>
        </el-form-item>
        <el-form-item label="资产名称" prop="assetName">
          <el-input v-model="scrapForm.assetName" placeholder="请输入资产名称"></el-input>
        </el-form-item>
        <el-form-item label="购置日期" prop="purchaseDate">
          <el-date-picker v-model="scrapForm.purchaseDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="报废原因" prop="reason">
          <el-input type="textarea" v-model="scrapForm.reason" rows="3" placeholder="请详细描述报废原因"></el-input>
        </el-form-item>
        <el-form-item label="附件上传">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :on-success="handleUploadSuccess"
            :file-list="scrapForm.fileList"
            multiple
            :limit="3"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>支持上传图片或文档，最多3个文件</template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible.scrap = false">取消</el-button>
        <el-button type="primary" @click="submitForm('scrap')">提交报废</el-button>
      </template>
    </el-dialog>

    <!-- 申请维修弹窗 -->
    <el-dialog 
      title="资产维修申请" 
      v-model="dialogVisible.repair" 
      width="600px"
    >
      <el-form 
        ref="repairFormRef" 
        :model="repairForm" 
        :rules="repairRules" 
        label-width="120px"
      >
        <el-form-item label="资产编号" prop="assetCode">
          <el-input v-model="repairForm.assetCode" placeholder="请输入资产编号"></el-input>
        </el-form-item>
        <el-form-item label="资产名称" prop="assetName">
          <el-input v-model="repairForm.assetName" placeholder="请输入资产名称"></el-input>
        </el-form-item>
        <el-form-item label="故障描述" prop="faultDesc">
          <el-input type="textarea" v-model="repairForm.faultDesc" rows="3" placeholder="请描述故障情况"></el-input>
        </el-form-item>
        <el-form-item label="期望维修日期" prop="expectRepairDate">
          <el-date-picker v-model="repairForm.expectRepairDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="repairForm.contact" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="附件上传">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :on-success="handleUploadSuccess"
            :file-list="repairForm.fileList"
            multiple
            :limit="3"
          >
            <el-button type="primary">点击上传故障图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible.repair = false">取消</el-button>
        <el-button type="primary" @click="submitForm('repair')">提交维修</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// 引入Element图标
import { TakeawayBox, RefreshLeft, Delete, Wrench, ArrowRight } from '@element-plus/icons-vue'
// 引入接口（假设已封装）
import { submitReturn, submitScrap, submitRepair } from '@/api/assetOperation'

// 路由实例
const router = useRouter()

// 弹窗显隐控制
const dialogVisible = reactive({
  return: false,   // 归还资产弹窗
  scrap: false,    // 报废申请弹窗
  repair: false    // 申请维修弹窗
})

// 表单数据
const returnForm = reactive({
  assetCode: '',
  assetName: '',
  receiveNo: '',
  returnDate: '',
  status: '',
  remark: ''
})

const scrapForm = reactive({
  assetCode: '',
  assetName: '',
  purchaseDate: '',
  reason: '',
  fileList: []
})

const repairForm = reactive({
  assetCode: '',
  assetName: '',
  faultDesc: '',
  expectRepairDate: '',
  contact: '',
  fileList: []
})

// 表单引用
const returnFormRef = ref(null)
const scrapFormRef = ref(null)
const repairFormRef = ref(null)

// 表单校验规则
const returnRules = {
  assetCode: [{ required: true, message: '请输入资产编号', trigger: 'blur' }],
  assetName: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
  receiveNo: [{ required: true, message: '请输入原领用单号', trigger: 'blur' }],
  returnDate: [{ required: true, message: '请选择归还日期', trigger: 'change' }],
  status: [{ required: true, message: '请选择资产状态', trigger: 'change' }]
}

const scrapRules = {
  assetCode: [{ required: true, message: '请输入资产编号', trigger: 'blur' }],
  assetName: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
  purchaseDate: [{ required: true, message: '请选择购置日期', trigger: 'change' }],
  reason: [{ required: true, message: '请描述报废原因', trigger: 'blur' }]
}

const repairRules = {
  assetCode: [{ required: true, message: '请输入资产编号', trigger: 'blur' }],
  assetName: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
  faultDesc: [{ required: true, message: '请描述故障情况', trigger: 'blur' }],
  expectRepairDate: [{ required: true, message: '请选择期望维修日期', trigger: 'change' }],
  contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

// 打开对应弹窗
const openDialog = (type) => {
  // 重置对应表单
  if (type === 'return' && returnFormRef.value) returnFormRef.value.resetFields()
  if (type === 'scrap' && scrapFormRef.value) {
    scrapFormRef.value.resetFields()
    scrapForm.fileList = []
  }
  if (type === 'repair' && repairFormRef.value) {
    repairFormRef.value.resetFields()
    repairForm.fileList = []
  }
  // 显示弹窗
  dialogVisible[type] = true
}

// 跳转至申请领用页面
const handleGoToApply = () => {
  router.push('/asset/apply') // 假设领用申请页面路由为 /asset/apply
}

// 上传成功回调
const handleUploadSuccess = (response, file, fileList) => {
  ElMessage.success('文件上传成功')
}

// 提交表单
const submitForm = async (type) => {
  let formRef, formData, apiFn, successMsg
  // 根据类型选择对应表单
  switch (type) {
    case 'return':
      formRef = returnFormRef
      formData = returnForm
      apiFn = submitReturn
      successMsg = '归还登记提交成功'
      break
    case 'scrap':
      formRef = scrapFormRef
      formData = scrapForm
      apiFn = submitScrap
      successMsg = '报废申请提交成功'
      break
    case 'repair':
      formRef = repairFormRef
      formData = repairForm
      apiFn = submitRepair
      successMsg = '维修申请提交成功'
      break
    default: return
  }

  // 表单校验
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return

  try {
    await apiFn(formData)
    ElMessage.success(successMsg)
    dialogVisible[type] = false // 关闭弹窗
  } catch (error) {
    ElMessage.error(error.message || '提交失败，请重试')
  }
}
</script>

<style scoped>
.asset-operation-container {
  padding: 30px 50px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 50px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #1f2329;
  margin-bottom: 10px;
}

.page-header p {
  color: #6b7280;
  font-size: 16px;
}

.operation-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.operation-card {
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.operation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.card-icon领用 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-icon领用 el-icon {
  font-size: 32px;
  color: #1890ff;
}

.card-icon归还 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #f6ffed;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-icon归还 el-icon {
  font-size: 32px;
  color: #52c41a;
}

.card-icon报废 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff2f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-icon报废 el-icon {
  font-size: 32px;
  color: #ff4d4f;
}

.card-icon维修 {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff7e6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card-icon维修 el-icon {
  font-size: 32px;
  color: #faad14;
}

.card-content {
  margin-bottom: 20px;
}

.card-content h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #1f2329;
}

.card-content p {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  align-items: center;
  color: #1890ff;
  font-size: 14px;
  margin-top: auto;
}

.arrow-icon {
  margin-left: 5px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.operation-card:hover .arrow-icon {
  transform: translateX(3px);
}

.upload-demo {
  margin-top: 10px;
}
</style>